<template>
	<view class="page">
		<tui-sticky :scrollTop="scrollTop" :stickyHeight="getStickyHeight" :stickyTop="stickyTop">
			<template v-slot:header>
				<view class="sticky-item ">
					<om-topsearch v-if="hasSearch" :useThemeColor="useThemeColor" :maxlength="searchMaxLength" :placeholder="searchPlaceholder" @confirm="searchClick" @input="inputSearch"></om-topsearch>
					<view class="head-cls">
						<slot name="header"></slot>
					</view>
				</view>
			</template>
			<template v-slot:content>
				<scroll-view scroll-y>
				<uni-list>
					<view v-for="(item, index) in datas" :key="index">
						<uni-list-item
							:title="item.title?(item.title + ': ' + (item.userId === userId ? '我' : (item.userName || ''))):(item.userId === userId ? '我' : (item.userName || ''))"
							:thumb="getThumb(item)"
							@click="infoTab(item,index)"
							:extraText="item.startdate"
						>
						 <view slot="note">
							<view>表单编码：<text class="">{{item.code}}</text></view>
							<view v-if="item.fileStatus && item.flowDesc">
								<text v-if="item.fileStatus === '23556'" class="bg-green radius padding-left-xs padding-right-xs">
									{{item.flowDesc}}
								</text>
								<text v-else-if="item.fileStatus === '34781'" class="bg-red radius padding-left-xs padding-right-xs">
									{{item.flowDesc}}
								</text>
								<text v-else class="bg-orange radius padding-left-xs padding-right-xs">
									{{item.flowDesc}}
								</text>
							</view>
							<view v-if="item.isShowButton">
								<view class="cu-tag radius  padding-left-sm padding-right-sm bg-orange " @click.stop="btnClick(item)">
									已读确认
								</view>
							</view>
						 </view>
						</uni-list-item>
					</view>
				</uni-list>
				</scroll-view>
			</template>
		</tui-sticky>
	</view>
</template>

<script>
	import { mapState } from 'pinia';
	import {useLoginUserStore} from '@/stores/login-user.js';
	const app = getApp()
export default {
	props: {
		/* 是否带搜索功能  */
		hasSearch: {
			type: Boolean,
			default: true
		},
		/*  */
		searchMaxLength: {
			type: [Number, String],
			default: 100
		},
		/*  */
		searchPlaceholder: {
			type: String,
			default: "请输入"
		},
		stickyHeight:{
			type: Number,
			default: 42
		},
		stickyTop:{
			type: Number,
			default: 34
		},
		//是否加载所有表单
		forAll:{
			type: Boolean,
			default: true
		},
		/*  */
		datas: {
			type: Array,
			default() {
				return [];
			}
		},
		//滚动距离
		scrollTop: {
			type: Number,
			default: 0
		},
		//是否使用主体色
		useThemeColor:{
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			thumbs: [app.globalData.icon.going, app.globalData.icon.over,app.globalData.icon.unapprove]
		};
	},
	computed:{
		getStickyHeight(){
			return this.stickyHeight + 'px'
		},
		
		...mapState(useLoginUserStore, ['userId'])
	},
	methods: {
		btnClick(e){
			this.$emit("btnClick",e)
		},
		infoTab(item,index) {
			this.om.getFormInfo(item.fileId, item.formCode,false,()=>{},index)
		},
		searchClick(e){
			this.$emit("confirm",e)
		},
		inputSearch(e){
			this.$emit("input",e)
		},
		getThumb(item){
			if(this.forAll){
				//#ifdef APP-PLUS
				return '/static' + item.iconName
				//#endif
				//#ifndef APP-PLUS
				return 'static' + item.iconName
				//#endif
			}else{
				if(item.fileStatus){
					if(item.fileStatus === '23556'){
						return this.thumbs[1]
					}else if(item.fileStatus === '34781')
						return this.thumbs[2]
					else{
						return this.thumbs[0]
					}
				}else{
					if(item.isover){
						return this.thumbs[1]
					}else{
						return this.thumbs[0]
					}
				}
			}
		}
	}
};
</script>
<style lang="scss" scoped>
	.head-cls{
		font-size: $uni-font-size-base;
		color: $uni-color-subtitle;
	}
</style>